<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务八：响应式网格（栅格化）布局</title>

	<link rel="stylesheet" type="text/css" href="css/task12.css">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-xs-6 col-sm-4">1</div>
		<div class="col-xs-6 col-sm-4">2</div>
		<div class="col-xs-12 col-sm-4">3</div>
	</div>
	<div class="row">
		<div class="col-xs-3 col-sm-3"></div>
		<div class="col-xs-6 col-sm-6"></div>
		<div class="col-xs-3 col-sm-3"></div>
	</div>
	<div class="row">
		<div class="col-xs-2 col-sm-1"></div>
		<div class="col-xs-2 col-sm-1"></div>
		<div class="col-xs-8 col-sm-2"></div>
		<div class="col-xs-3 col-sm-2"></div>
		<div class="col-xs-3 col-sm-6"></div>
	</div>
</div>
</body>
</html>